<template>
    <div class="data-center-main" ref="dataCenter">
        <div class="top">
            <div class="left">
                <div class="title">系统检测疑似故障</div>
                <div>
                    <el-table ref="deviceTable" :data="list" style="width: 100%" row-key="id" height="340">
                        <el-table-column label="设备编号" prop="deviceID" align="center"></el-table-column>
                        <el-table-column label="位置" prop="address" align="center">
                        </el-table-column>
                        <el-table-column label="所属" prop="belong" align="center" width="110"></el-table-column>
                        <el-table-column label="疑似故障" prop="fault" align="center"></el-table-column>
                        <el-table-column label="日期" prop="date" align="center"></el-table-column>
                        <el-table-column label="状态" prop="status" align="center">
                        </el-table-column>
                        <el-table-column label="操作" prop="operation" align="center" width="110">
                            <template slot-scope="scope">
                                <div>
                                    <div>查看详情</div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="right">
                <div id="chart1"></div>
                <div id="chart2"></div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <div class="title">点位人员上报故障</div>
                <div>
                    <el-table ref="deviceTable" :data="list" style="width: 100%" row-key="id" height="340">
                        <el-table-column label="设备编号" prop="deviceID" align="center"></el-table-column>
                        <el-table-column label="位置" prop="address" align="center">
                        </el-table-column>
                        <el-table-column label="所属" prop="belong" align="center" width="110"></el-table-column>
                        <el-table-column label="疑似故障" prop="fault" align="center"></el-table-column>
                        <el-table-column label="日期" prop="date" align="center"></el-table-column>
                        <el-table-column label="状态" prop="status" align="center">
                        </el-table-column>
                        <el-table-column label="操作" prop="operation" align="center" width="110">
                            <template slot-scope="scope">
                                <div>
                                    <div>查看详情</div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="right">
                <div id="chart3"></div>
                <div id="chart4"></div>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    components: {},
    data() {
        return {
            list: [
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },
                {
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },{
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },{
                    deviceID: '31231546',
                    address: '浙江省杭州市滨江区',
                    belong: '张三',
                    fault: '位置偏移',
                    date: '2020-08-08',
                    status: '待处理',
                    operation: '查看详情'
                },


            ],
            //设备在线率
            processState: {
                color: ['#5B6BF4', '#A9B4FF', '#FFCB47','#ADADAD'],
                title: {
                    text: '处理状态统计',
                    textStyle: {
                        fontFamily: 'HarmonyOS_Sans_SC_Medium',
                        fontSize: 18,
                        color: '#333333',
                        left: '0%',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    left: '20px',
                    //top: '45%',
                    bottom: '10px',
                    orient: 'vertical',
                },
                // grid: {
                //     left: '0px',
                //     bottom: '13%',
                //     // containLabel: true
                // },
                series: [
                    {
                        //name: '设备在线率',
                        type: 'pie',
                        radius: ['30%', '50%'],
                        center: ['35%', '45%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            formatter: '{c}%',
                        },
                        labelLine: {
                            length: 5,
                            length2: 0,
                            //maxSurfaceAngle: 80
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: 40,
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        // labelLine: {
                        //     show: false
                        // },
                        data: [
                            { value: 72, name: '处理完成' },
                            { value: 12, name: '待处理' },
                            { value: 16, name: '处理中' },
                        ]
                    },
                ]
            },
            //故障类型统计
            faultType: {
                color: ['#5B6BF4', '#4473C5', '#F7C540','#FE964F','#A5A5A5','#5B9CD6'],
                title: {
                    text: '故障类型统计',
                    textStyle: {
                        fontFamily: 'HarmonyOS_Sans_SC_Medium',
                        fontSize: 18,
                        color: '#333333',
                        left: '0%',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    left: '20px',
                    //top: '45%',
                    bottom: '10px',
                    //orient: 'vertical',
                    width:'200px',
                },
                // grid: {
                //     left: '0px',
                //     bottom: '13%',
                //     // containLabel: true
                // },
                series: [
                    {
                        //name: '设备在线率',
                        type: 'pie',
                        radius: ['30%', '50%'],
                        center: ['35%', '45%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            formatter: '{c}',
                        },
                        labelLine: {
                            length: 5,
                            length2: 0,
                            //maxSurfaceAngle: 80
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: 40,
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        // labelLine: {
                        //     show: false
                        // },
                        data: [
                            { value: 916, name: '位置偏移' },
                            { value: 577, name: '控制器异常' },
                            { value: 210, name: '相机异常' },
                            { value: 950, name: '制冷异常' },
                            { value: 395, name: '其他故障' },
                        ]
                    },
                ]
            },
        }
    },
    mounted() {
        this.init()
    },
    filters: {

    },
    watch: {

    },

    beforeDestroy() {

    },
    methods: {
        init(){
            var chartDom = document.getElementById('chart1')
            var processStateChart = this.$echarts.init(chartDom)
            processStateChart.setOption(this.processState)
            var chartDom = document.getElementById('chart3')
            var processStateChart = this.$echarts.init(chartDom)
            processStateChart.setOption(this.processState)
            var chartDom = document.getElementById('chart2')
            var faultTypeChart = this.$echarts.init(chartDom)
            faultTypeChart.setOption(this.faultType)
            var chartDom = document.getElementById('chart4')
            var faultTypeChart = this.$echarts.init(chartDom)
            faultTypeChart.setOption(this.faultType)
            window.onresize = () => {
                processStateChart.resize()
                faultTypeChart.resize()
            }
        }
    },

}

</script>

<style lang="scss" scoped>
.data-center-main {
    background-color: #F3F3F3;
    width: 100%;
    height: calc(100vh - 85px);
    flex-direction: column;
    display: flex;
    padding: 1%;
}

.top {
    height: 50%;
    width: 100%;
    //background-color: #fff;
    margin-bottom: 1vw;
    display: flex;
    justify-content: space-between;
}


.bottom {
    //background-color: #fff;
    width: 100%;
    height: 49%;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 50%;
    height: 100%;
    background-color: #fff;
    margin-right: 1vw;
    border-radius: 8px;
    padding: 15px;
}

.right {
    width: 49%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
}
.right>div{
    width: 50%;
    height: 100%;
}

.title {
    font-size: 18px;
    font-family: 'HarmonyOS_Sans_SC_Medium';
    margin-bottom: 10px;
    color: '#333333',
}
</style>